<template>
	<view class="content">

		<view class="container">

			<view class="settings_item" v-if="mobile">
				<view class="settings_name">
					手机号
				</view>
				<input type="text" value="" class="value" placeholder-style="color:#a1a1a1" v-model="mobile" disabled
					placeholder="请输入昵称" />
					<image @click.stop="oldPassword=!oldPassword" class="eye-img"
						:src="oldPassword?'/static/user/eye.png':'/static/user/on-eye.png'" mode="aspectFill"></image>
			</view>

			<view class="settings_item">
				<view class="settings_name" style="">
					验证码
				</view>
				<input type="text" style="flex: 1;" placeholder-style="color:#a1a1a1" v-model="code" class="value"
					placeholder="请输入验证码" />
				<view class="get_code" @tap="send_before" v-if="verification">
					<text>发送验证码</text>
				</view>
				<view class="get_codeing" v-else>
					<text>{{ timer }} 秒后重新获取</text>
				</view>
			</view>

			<view class="settings_item">
				<view class="settings_name">
					新密码
				</view>
				<input type="text" value="" password="" placeholder-style="color:#a1a1a1" placeholder='输入6-16位新密码'
					v-model="newPwd" class="value" />
			</view>
			<view class="settings_item">
				<view class="settings_name">
					确认密码
				</view>
				<input type="text" value="" password="" placeholder-style="color:#a1a1a1" placeholder='输入6-16位新密码'
					v-model="rePwd" class="value" />
			</view>

		</view>

		<view class="bottom_box">
			<view class="submit_btn" @click="submitHandler()">
				<text>
					立即提交
				</text>
			</view>
		</view>
		<uni-popup ref="codebox" type="center">
			<view class="code_box">
				<!-- 		<view class="close-btn" @tap="close">
				<n-icon name="roundclose" size="36" color="#4793C2"></n-icon>
			</view> -->
				<view class="code_title">
					请输入验证码
				</view>
				<view class="code_input">
					<input type="text" class="code_input_style" placeholder-class="code_holder" v-model="tupian_code"
						placeholder="请输入验证码" placeholder-style="color: #999">
					<image :src="code_img" mode="widthFix" class="code_img" @tap="get_img_code()"></image>
				</view>
				<view class="ok_btn" @tap="sendCode()">
					<text>
						确定
					</text>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newPwd: '',
				rePwd: '',
				sex: 0,
				submitStatus: false,
				oldPassword: true,
				mobile: '',
				code: '',
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s

				tupian_code: '',
				code_img: ''
			}
		},
		computed: {
			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else {
					res.status = true;
				}
				return res;
			}
		},
		methods: {
			close: function() {
				this.$refs.codebox.close()
			},
			refresh: function() {
				this.$api.getImgCode({}, res => {
					if (res.status) {
						this.code_img = res.data.captcha_image
					}
				})
			},
			send_before: function() {

				this.$api.getImgCode({}, res => {
					if (res.status) {
						this.code_img = res.data.captcha_image
						this.$refs.codebox.open()
					}
				})

			},
			// 保存资料
			submitHandler() {
				if (this.submitStatus) {
					return false;
				}
				this.submitStatus = true;
				if (this.code === '') {
					this.$common.errorToShow('请输入验证码')
					this.submitStatus = false;
				} else if (this.newPwd === '') {
					this.$common.errorToShow('请输入新密码')
					this.submitStatus = false;
				} else if (this.rePwd === '') {
					this.$common.errorToShow('请输入确认密码')
					this.submitStatus = false;
				} else {
					let data = {
						mobile: this.mobile,
						code: this.code,
						newpwd: this.newPwd,
						repwd: this.rePwd
					};
					this.$api.userForgetpwd(data, res => {
						if (res.status) {
							this.submitStatus = false;
							this.$common.successToShow(res.msg)
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						} else {
							this.$common.errorToShow(res.msg)
							this.submitStatus = false;
						}
					}, res => {
						this.submitStatus = false;
					})
				}
			},
			// 发送短信验证码
			sendCode() {
				if (!this.rightMobile.status) {
					this.$common.errorToShow(this.rightMobile.msg);
				} else {
					this.$common.loadToShow('发送中...');
					setTimeout(() => {
						this.$common.loadToHide();
						this.$api.sms({
							mobile: this.mobile,
							code: 'veri',
							captcha: this.tupian_code
						}, res => {
							if (res.status) {
								this.timer = 60;
								this.verification = false;
								this.$common.successToShow(res.msg);
								this.countDown(); // 执行验证码计时
								this.close()
							} else {
								this.$common.errorToShow(res.msg);
							}
						});
					}, 1000);
				}
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
		},
		onLoad: function() {
			let _this = this;
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}
			_this.$api.userInfo({}, function(res) {
				if (res.status) {
					let the_sex = res.data.sex - 1;
					if (res.data.birthday == null) {
						res.data.birthday = '请选择';
					}
					_this.nickname = res.data.nickname;
					_this.mobile = res.data.mobile;
					_this.sex = the_sex;
					_this.index = the_sex;
					_this.birthday = res.data.birthday;
					_this.avatar = res.data.avatar;
					_this.oldPassword = res.data.password;
					if (_this.birthday != '请选择') {
						_this.date = _this.birthday;
					}
				} else {
					//报错了
					_this.$common.errorToShow(res.msg);
				}
			});
		}
	}
</script>
<style>

.settings_name{
	font-size: 28rpx;
	color: #000000;
	width: 140rpx;
}
.value{
	font-size: 28rpx;
	text-align: left
}
</style>
<style>
	@import url('/pages/user/settings/settings.css');
</style>
